{% include "../include/head.html" %}

<style>
    .page-wrap{height:100%;box-sizing:border-box;padding:10px;background-color:#fff;}
    .mui-search{position:relative;}
    .mui-off-canvas-wrap{background-color:#fff;}
    #searchbtn{position:absolute;top:0;right:0;height:34px;z-index: 2;line-height:10px;border-top-left-radius: 0;border-bottom-left-radius:0;}
</style>

<body>
    <div id="content-wrap" class="mui-off-canvas-wrap mui-slide-in">

        <!--头部-->
        {% include "../include/header.html" %}

        <div class="mui-inner-wrap">
            <div class="page-wrap">
                <div class="mui-input-row mui-search">
                    <input type="search" class="mui-input-clear" placeholder="" id="searchtext">
                    <button type="button" data-loading-text="提交中" id="searchbtn" class="mui-btn mui-btn-danger">确认</button>
                </div>
            </div>
            <div class="content-list">

            </div>
            <div class="mui-off-canvas-backdrop"></div>
        </div>

    </div>
    <script>
        mui('body').on('tap', 'a', function () {
            window.top.location.href = this.href;
        })
        //获取dom元素
        function dom1(elem) {
            return document.querySelector(elem)
        }

        function dom2(elem) {
            return document.querySelectorAll(elem)
        }
        
        let detail = origin + '/newsdetail/'
        ;
        (function ($) {
            //地址
            const origin = location.origin
            let getlist = origin + '/getsearch/'
            let contentList = dom1('.content-list')
            $('body').on('tap', '#searchbtn', function () {
                let keyword = document.querySelector('#searchtext').value
                $.ajax(`${getlist}${keyword}/1`, {
                    type: 'get',
                    dataType: 'json',
                    success: function (data) {
                        contentList.innerHTML = elemObj(data)
                    }
                })
            })
        })(mui)

        //组件模板
        function elemObj(data) {
            let htmlElem = ''
            let _data = data.data
            _data.forEach(res => {
                htmlElem +=
                    `
            <section class="content-area content-area10101">
                <div class="img-area">
                    <a href="${detail}${res.id}"><img src="${res.cover}" /></a>
                </div>
                <div class="txt-area">
                    <a href="${detail}${res.id}">
                        <p class="txt-area-title">${res.title}</p>
                    </a>
                    <div class="txt-area-mark">
                        <!--<span>热</span>
                        <span>顶置</span>
                        <span>专题</span>-->
                        <div class="txt-area-mark-right">
                            <i>v</i>
                            <b>${res.from}</b>
                        </div>
                    </div>
                </div>
            </section>
            `
            })
            return htmlElem
        }
    </script>
</body>

</html>